<template>
  <a-modal
    :title="pageFlag === 'write' ? (action === 'Add' ? '新增' : '编辑') : '指标固化'"
    v-model="visible"
    width="1200px"
    :dialog-style="{ top: '70px' }"
    wrapClassName="modal-add"
    :maskClosable="false"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning" tip="加载中...">
      <div class="content">
        <div class="top">
          <span class="title">基本信息</span>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>任务名称：</span>
            <div class="item-value">
              <a-input
                placeholder="请输入任务名称"
                allow-clear
                v-model="basicInfo.writeName"
                @change="basicInfoFlag.writeName = true"
              />
            </div>
            <span class="item-error" v-show="basicInfoFlag.writeName && basicInfo.writeName.length === 0"
              >任务名称不能为空</span
            >
          </div>
          <div class="item" style="margin-bottom: 5px">
            <span class="item-left">任务描述：</span>
            <div class="item-value">
              <a-textarea
                placeholder="请输入任务描述"
                :auto-size="{ minRows: 3, maxRows: 3 }"
                allow-clear
                v-model="basicInfo.writeDesc"
              />
            </div>
          </div>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>是否启用：</span>
            <div class="item-value">
              <a-radio-group class="radio-line" v-model="basicInfo.status">
                <a-radio style="width: 120px" value="1">启用</a-radio>
                <a-radio value="2">停用</a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
        <div class="center">
          <span class="title">任务调度</span>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>任务类型：</span>
            <div class="item-value">
              <a-radio-group class="radio-line" v-model="basicInfo.writeType" @change="handleWriteType">
                <a-radio style="width: 120px" value="1">重复任务</a-radio>
                <a-radio value="2">单次定时任务</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>任务时间：</span>
            <div class="item-value" v-if="writeTypeFlag">
              <j-cron ref="innerVueCron" :value="basicInfo.writeCron" @change="handleSetCorn"></j-cron>
            </div>
            <div class="item-value" v-else>
              <a-date-picker
                show-time
                style="width: 100%"
                placeholder="请选择任务时间"
                format="YYYY-MM-DD HH:mm:ss"
                :disabled-date="disabledDate"
                v-model="basicInfo.writeDate"
              />
            </div>
            <span v-if="writeTypeFlag" style="margin-left: 20px; color: blue; cursor: pointer; line-height: 32px;" @click="handleSetCornHelp">帮助</span>
            <span class="item-error" v-show="basicInfoFlag.writeCron && Object.keys(basicInfo.writeCron).length === 0">任务时间不能为空</span>
          </div>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>失败重试：</span>
            <div class="item-value">
              <a-checkbox class="item-check" v-model="basicInfo.needRetry" @change="handleCheck" />
              <div class="item-input">
                重试次数:
                <a-input-number
                  :disabled="basicInfoFlag.needRetry"
                  style="margin: 0 6px; width: 165px"
                  v-model="basicInfo.retryTimes"
                  :min="0"
                />次
              </div>
              <div class="item-input">
                间隔时间：
                <a-input-number
                  :disabled="basicInfoFlag.needRetry"
                  style="margin: 0 6px; width: 165px"
                  v-model="basicInfo.retryInterval"
                  :min="0"
                />秒
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <span class="title">参数配置</span>
          <div class="item">
            <span class="item-left"><label class="requrid">*</label>待同步模型：</span>
            <div class="item-value">
              <a-select
                show-search
                mode="multiple"
                v-model="basicInfo.topicId"
                style="width: 100%"
                placeholder="请选择待同步模型"
                @change="handleTopId"
                :filter-option="filterOption"
                :disabled="pageFlag !== 'write' || (pageFlag === 'write' && action !== 'Add')"
              >
                <a-select-option v-for="item in topicIds" :key="item.id" :disabled="item.hasWrite === '1'">
                  {{ item.topicName }}
                </a-select-option>
              </a-select>
            </div>
            <span class="item-error" v-show="basicInfoFlag.topicId && basicInfo.topicId.length === 0"
              >待同步模型不能为空</span
            >
          </div>
          <div class="box">
            <span class="left"><label class="requrid">*</label>固化方式：</span>
            <div class="right">
              <a-radio-group v-model="basicInfo.writeFilterType" @change="handleCheckType">
                <a-radio style="display: block; line-height: 44px;" value="1">全量同步（全量同步会清空目标表）</a-radio>
                <a-radio style="display: block; line-height: 44px; overflow: auto;" value="2">增量同步 &emsp;&emsp;&emsp;&emsp;&emsp;增量同步条件：
                  <div class="box-content">
                    <a-select v-model="writeUserFilter.filterAction" :disabled="writeUserFilter.filterActionFlag" style="width: 600px;">
                      <a-select-option key="And"> And(所有条件都要求匹配) </a-select-option>
                      <a-select-option key="Or"> Or(条件中的任意一个匹配) </a-select-option>
                    </a-select>
                    <div class="item-content">
                      <div class="item-select" v-for="item in writeUserFilter.commonArray" :key="item.sid">
                        <a-select
                          placeholder="请选择字段名称"
                          :disabled="writeUserFilter.filterActionFlag"
                          style="width: 160px"
                          @change="handleSelectName($event, item)"
                          v-model="item.columnName">
                          <a-select-option v-for="option in writeUserFilter.optionDataArray" :key="option.relIndexId">
                            {{ option.columnName }}
                          </a-select-option>
                        </a-select>
                        <a-select
                          v-model="item.columnRule"
                          placeholder="请选择过滤条件"
                          :disabled="writeUserFilter.filterActionFlag"
                          style="width: 150px; margin-left: 10px; margin-right: 10px;">
                          <a-select-option v-for="tag in writeUserFilter.optionRuleArray" :key="tag.id">{{ tag.name }}</a-select-option>
                        </a-select>
                        <a-input
                          allowClear
                          placeholder="请输入字段值"
                          v-if="item.dataType !== 'date'"
                          style="width: 160px"
                          v-model="item.columnValue"
                          :disabled="writeUserFilter.filterActionFlag"
                        />
                        <a-date-picker
                          allowClear
                          v-if="item.dataType === 'date'"
                          v-model="item.columnValue"
                          style="width: 160px"
                          placeholder="请选择日期"
                          format="YYYY-MM-DD"
                          :disabled="writeUserFilter.filterActionFlag"
                        />
                        <a-button style="width: 40px; margin-left: 15px;" :disabled="writeUserFilter.filterActionFlag" @click="handleAddItem(item)">+</a-button>
                        <a-button style="width: 40px; margin-left: 5px;" :disabled="writeUserFilter.filterActionFlag" @click="handleDeleteItem(item)">-</a-button>
                      </div>
                    </div>
                  </div>
                </a-radio>
                <a-radio style="display: block; line-height: 44px;" value="3">周期同步 &emsp;&emsp;&emsp;&emsp;&emsp;周期判断条件：    
                  <a-select v-model="intervalCol" placeholder="请选择周期判断条件" style="width: 604px; padding-left: 4px;" :disabled="basicInfo.writeFilterType !== '3'">
                    <a-select-option v-for="option in intervalColArray" :key="option.relIndexId">
                      {{ option.columnName }}
                    </a-select-option>
                  </a-select>
                </a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
    </template>
    <a-modal v-model="helpModelVisible" title="帮助" destroyOnClose :footer="null" :width="760">
      <div>
        <p>cron表达式格式：秒 分 时 日 月 周 年(可为空)</p>
        <a-table size="small" :pagination="false" :columns="helpModelProps.columns" :data-source="helpModelProps.datas" />
        <p style="margin-top: 1em;">“?”字符：表示不确定的值</p>
        <p>“*”字符：表示所有值</p>
        <p>“,”字符：表示附加一个可能值</p>
        <p>“-”字符：表示一个指定的范围</p>
        <p>“/”字符：符号前表示开始时间，符号后表示每次递增的值</p>
        <p>“L”字符：用在日表示一个月中的最后一天，用在周表示该月最后一个星期X</p>
        <p>“W”字符：指定离给定日期最近的工作日(周一到周五)</p>
        <p>“#”字符：表示该月第几个周X。例如，6#3表示该月第3个周五</p>
        <p>“C”字符：表示和calendar联系后计算过的值。例如，“5C”用在日表示在这个月第5天或之后包括calendar的第一天；1C”用在周表示在这周日或之后包括calendar的第一天</p>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { postAction, getAction, putAction } from '@/api/manage'
import JCron from '@/components/jeecg/JCron'
import moment from 'moment'

export default {
  name: 'TopicWriteModal',
  components: { JCron },
  props: {
    modalVisible: {
      type: Boolean,
      default: false
    },
    pageFlag: {
      type: String,
      default: 'write'
    },
    currentId: {
      type: String,
      default: ''
    },
    record: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      visible: this.modalVisible,
      action: this.currentId === '' ? 'Add' : 'Update',
      loading: false,
      writeTypeFlag: true,
      basicInfo: {
        writeName: '',
        writeDesc: '',
        writeDate: '',
        status: '1',
        writeType: '1',
        writeCron: '',
        needRetry: true,
        retryTimes: undefined,
        retryInterval: undefined,
        topicId: [],
        writeFilterType: '1'
      },
      basicInfoFlag: {
        writeName: false,
        topicTable: false,
        writeCron: false,
        topicId: false,
        needRetry: false
      },
      topicIds: [],
      // 用户自定义的过滤条件
      writeUserFilter: {
        filterAction: 'And',
        filterActionFlag: true,
        optionDataArray: [],
        optionRuleArray: [
          { id: 'eq', name: '等于' },
          { id: 'like', name: '包含' },
          { id: 'right_like', name: '以..开始' },
          { id: 'left_like', name: '以..结尾' },
          { id: 'in', name: '在...中' },
          { id: 'ne', name: '不等于' },
          { id: 'gt', name: '大于' },
          { id: 'ge', name: '大于等于' },
          { id: 'lt', name: '小于' },
          { id: 'le', name: '小于等于' }
        ],
        commonArray: [
          {
            sid: Math.random(),
            columnName: undefined,
            columnRule: undefined,
            columnValue: '',
            isIndex: '',
            id: '',
            relColumnId: '',
            dataType: 'input'
          }
        ]
      },
      url: {
        add: '/topic/config/addWriteJob',
        list: '/topic/config/listTopic',
        update: '/index/scSituationIndexTopicWrite/edit',
        queryById: '/index/scSituationIndexTopicWrite/list'
      },
      spinning: false,
      updateId: '',
      helpModelVisible: false,
      helpModelProps: {
        columns: [
          {
            title: '字段名',
            dataIndex: 'name'
          },
          {
            title: '允许的值',
            dataIndex: 'value'
          },
          {
            title: '允许的特殊字符',
            dataIndex: 'symbol'
          }
        ],
        datas: [
          {
            key: '1',
            name: '秒(Seconds)',
            value: '0-59',
            symbol: ', - * /'
          },
          {
            key: '2',
            name: '分(Minutes)',
            value: '0-59',
            symbol: ', - * /'
          },
          {
            key: '3',
            name: '时(Hours)',
            value: '0-23',
            symbol: ', - * /'
          },
          {
            key: '4',
            name: '日(Day-of-Month)',
            value: '1-31',
            symbol: ', - * ? / L W C'
          },
          {
            key: '5',
            name: '月(Month)',
            value: '1-12 或 JAN, FEB, MAR, APR, MAY, JUN, JUL, AUG, SEP, OCT, NOV, DEC',
            symbol: ', - * /'
          },
          {
            key: '6',
            name: '周(Day-of-Week)',
            value: '1-7 或 SUN, MON, TUE, WED, THU, FRI, SAT',
            symbol: ', - * ? / L C #'
          },
          {
            key: '7',
            name: '年 (可选字段)',
            value: 'empty, 1970-2099',
            symbol: ', - * /'
          },
        ]
      },
      intervalCol: undefined
    }
  },
  computed: {
    intervalColArray() {
      return this.writeUserFilter.optionDataArray.filter(item => {
        return item.dataType === 'date'
      })
    }
  },
  mounted() {
    this.handleCommonData()
  },
  methods: {
    disabledDate(current) {
      return current && current < moment().endOf('day')
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.indexOf(input) >= 0
      )
    },

    /**
     * @description 获取相关数据
     * @returns void
     */
    async handleCommonData() {
      await this.handleGetListTopic()
      if (this.pageFlag === 'write') {
        // 编辑时查询信息回显
        if (this.currentId !== '') {
          this.spinning = true
          await this.handleGetDetail()
        }
      } else {
        // 指标建模页面引用时根据详情查询返回的对象是否时空，来判断新增或者编辑
        this.spinning = true
        await this.handleGetDetail()
      }
    },

    /**
     * @description 任务类型改变
     * @returns void
     */
    handleWriteType() {
      if (this.basicInfo.writeType === '1') {
        this.writeTypeFlag = true
      } else {
        this.writeTypeFlag = false
      }
    },

    /**
     * @description 获取专题表列表
     * @returns void
     */
    handleGetListTopic() {
      if (this.pageFlag === 'write') {
        getAction(this.url.list, {}).then((res) => {
          if (res.code === 200) {
            this.topicIds = res.result
          } else {
            this.topicIds = []
          }
        }).catch(() => {
          this.topicIds = []
        })
      } else {
        this.topicIds = [this.record]
      }
    },

    /**
     * @description 根据id查询详情
     * @returns void
     */
    handleGetDetail() {
      getAction(this.url.queryById, { topicId: this.currentId }).then((res) => {
        if (res.code === 200) {
          // 查询到信息进行回显
          const obj = res.result
          if (this.pageFlag === 'write') {
            // 指标固化页面，直接回显数据
            if (obj !== null && obj.records.length === 1) {
              this.handleDetailData(obj.records[0])
            } else {
              this.$message.warning('详情查询暂时无法查询到数据')
            }
          } else {
            // 指标建模页面
            if (obj !== null && obj.records.length === 0) {
              // 新增操作
              this.action = 'Add'
              // 选中待同步模型操作
              this.basicInfo.topicId = [this.record.id]
              this.handleTopId()
            } else if (obj !== null && obj.records.length === 1) {
              this.action = 'Update'
              this.handleDetailData(obj.records[0])
            } else {
              this.$message.warning('详情查询暂时无法查询到数据')
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },

    /**
     * @description 处理详情查询出的数据
     * @param {*} obj
     * @returns void
     */
    handleDetailData(obj) {
      this.updateId = obj.id
      this.basicInfo.writeName = obj.writeName
      this.basicInfo.writeDesc = obj.writeDesc
      this.basicInfo.status = obj.status
      this.basicInfo.writeType = obj.writeType
      if (this.basicInfo.writeType === '1') {
        this.writeTypeFlag = true
      } else {
        this.writeTypeFlag = false
      }
      if (obj.writeDate) {
        this.basicInfo.writeDate = moment(obj.writeDate).format('YYYY-MM-DD HH:mm:ss')
      }
      this.basicInfo.writeCron = obj.writeCron
      this.basicInfo.needRetry = obj.needRetry === 1
      this.basicInfo.retryTimes = obj.retryTimes
      this.basicInfo.retryInterval = obj.retryInterval
      // 需要特殊处理topicId
      this.basicInfo.topicId = [obj.topicId]
      this.basicInfo.writeFilterType = obj.writeFilterType
      // 设置编辑是否可用操作
      this.handleCheckType()
      this.writeUserFilter = JSON.parse(obj.writeUserFilter)
      this.intervalCol = obj.intervalCol === null ? undefined : obj.intervalCol
    },

    /**
     * @description corn回填
     * @returns void
     */
    handleSetCorn(data) {
      this.basicInfoFlag.writeCron = true
      this.$nextTick(() => {
        this.basicInfo.writeCron = data
      })
      if (Object.keys(data).length == 0) {
        this.$message.warning('请输入cron表达式!')
      }
    },

    /**
     * @description corn帮助按钮事件响应
     * @returns void
     */
    handleSetCornHelp() {
      this.helpModelVisible = true
    },

    /**
     * @description 处理复选框操作
     * @returns void
     */
    handleCheck() {
      if (this.basicInfo.needRetry) {
        this.basicInfoFlag.needRetry = false
      } else {
        this.basicInfoFlag.needRetry = true
      }
    },

    /**
     * @description 待同步模型多选操作
     * @returns void
     */
    handleTopId() {
      this.basicInfoFlag.topicId = true
      // 需要校验当前选中的待同步模型是否有固化任务
      // Todo
      if (this.basicInfo.topicId.length === 0) {
        // 初始化用户自定义过滤数据
        this.writeUserFilter.optionDataArray = []
        this.writeUserFilter.commonArray = []
        return
      }
      // 进行数据过滤操作
      // 1.首先获取所有选中的同步模型，之后获取topicCols（topicCols为数组）
      const tempArr = []
      this.basicInfo.topicId.map((id, index) => {
        this.topicIds.map((item, index) => {
          if (item.id === id) {
            if (Object.prototype.toString.call(item.topicCols) === '[object Array]' && item.topicCols.length > 0) {
              tempArr.push(item.topicCols)
            }
          }
        })
      })
      // 2.获取topicCols之后，把其中共用的取出作为表字段的数据源, 当前tempArr为二维数组
      // 思路： 根据业务可以进行取巧，以二维数组中第一个数据得属性为基准取属性的交集
      if (tempArr.length === 1) {
        this.writeUserFilter.optionDataArray = tempArr[0]
      }
      if (tempArr.length > 1) {
        const finalArray = []
        const firstObj = tempArr[0]
        firstObj.map((firstObjItem, index) => {
          let addFag = true
          // 标识符判断数组
          const flagArray = new Array(tempArr.length - 1)
          for (let k = 0; k < flagArray.length; k++) {
            flagArray[k] = false
          }
          for (let i = 1; i < tempArr.length; i++) {
            const itemArray = tempArr[i]
            itemArray.map((curItem, index) => {
              if (firstObjItem.relIndexId === curItem.relIndexId) {
                flagArray[i - 1] = true
              }
            })
          }
          // 当标识符判断数据中所有的数据都为true时，则可以判定为公用元素
          flagArray.map((flag, index) => {
            if (flag === false) {
              addFag = false
            }
          })
          if (addFag) {
            finalArray.push(firstObjItem)
          }
        })
        // 赋值给下拉列表数组选项
        this.writeUserFilter.optionDataArray = finalArray
      }
      // 每次数据变化时重置writeUserFilter
      this.writeUserFilter.commonArray = [{
        sid: Math.random(),
        columnName: undefined,
        columnRule: undefined,
        columnValue: '',
        isIndex: '',
        id: '',
        relColumnId: ''
      }]
    },

    /**
     * @description 复选框选择
     * @returns void
     */
    handleCheckType() {
      if (this.basicInfo.writeFilterType !== '2') {
        this.writeUserFilter.filterActionFlag = true
      } else {
        this.writeUserFilter.filterActionFlag = false
      }
    },

    /**
     * @description 字段名字选择操作
     * @param {String} value
     * @param {Object} item
     * @returns void
     */
    handleSelectName(value, item) {
      // 清空原先输入的值
      item.columnValue = ''
      this.writeUserFilter.optionDataArray.map((option, index) => {
        if (option.relIndexId === value) {
          // 进行赋值操作
          item.id = option.relIndexId
          item.relColumnId = option.relColumnId
          item.dataType = option.dataType
          item.isIndex = option.isIndex
        }
      })
    },

    /**
     * @description 追加操作
     * @param {Object} obj
     * @returns void
     */
    handleAddItem(obj) {
      // optionDataArray数组为空不允许追加
      if (this.writeUserFilter.optionDataArray.length === 0) return
      // 追加数据操作(再当前位置的下方追加)
      let indexFlag = -1
      this.writeUserFilter.commonArray.map((item, index) => {
        if (item.sid === obj.sid) {
          indexFlag = index
        }
      })
      // 追加数据
      this.writeUserFilter.commonArray.splice(indexFlag + 1, 0, {
        sid: Math.random(),
        columnName: undefined,
        columnRule: undefined,
        columnValue: '',
        isIndex: '',
        id: '',
        relColumnId: ''
      })
    },

    /**
     * @description 删除操作
     * @param {Object} obj
     * @returns void
     */
    handleDeleteItem(obj) {
      // 删除数据操作(当数组的数据还剩最后一条时，不允许删除)
      if (this.writeUserFilter.commonArray.length === 1) return
      const tempArr = []
      this.writeUserFilter.commonArray.map((item, index) => {
        if (item.sid !== obj.sid) {
          tempArr.push(item)
        }
      })
      this.writeUserFilter.commonArray = tempArr
    },

    /**
     * @description 关闭操作
     * @returns void
     */
    handleCancel() {
      this.visible = false
      this.$emit('close')
    },

    /**
     * @description  确定添加
     * @returns void
     */
    handleOk() {
      // 确定之前校验数据的合法性和准确性
      let nextFlag = true
      if (this.basicInfo.writeName === '') {
        this.$message.warning('任务名称不能为空!')
        nextFlag = false
        return
      }
      if (this.basicInfo.writeType === '1') {
        if (this.basicInfo.writeCron === '') {
          this.$message.warning('任务时间不能为空!')
          nextFlag = false
          return
        }
      } else {
        if (this.basicInfo.writeDate === '') {
          this.$message.warning('任务时间不能为空!')
          nextFlag = false
          return
        }
      }
      // 针对失败次数进行特殊判断
      if (this.basicInfo.needRetry) {
        // 需要判断重试次数和间隔时间不能为空
        if (!this.basicInfo.retryTimes && !this.basicInfo.retryInterval) {
          this.$message.warning('当勾选失败重试时，重试次数和重试时间不能为空或者0!')
          nextFlag = false
          return
        }
      }
      if (this.basicInfo.topicId.length === 0) {
        this.$message.warning('待同步模型不能为空，请选择待同步模型！')
        nextFlag = false
        return
      }
      // 当选择固化方式为增量同步时需要校验自定义增量信息
      if (this.basicInfo.writeFilterType === '2') {
        this.writeUserFilter.commonArray.map((item, index) => {
          if (item.columnName === '') {
            this.$message.warning('增量同步条件：字段名称不能为空!')
            nextFlag = false
          }
          if (item.columnRule === '') {
            this.$message.warning('增量同步条件：过滤条件不能为空!')
            nextFlag = false
          }
          if (item.columnValue === '') {
            this.$message.warning('增量同步条件：字段值不能为空!')
            nextFlag = false
          }
        })
      }
      // 当选择固化方式为周期同步时需要校验周期判断条件
      if (this.basicInfo.writeFilterType === '3' && (this.intervalCol === undefined || this.intervalCol === null)) {
        this.$message.warning('周期判断条件不能为空!')
        nextFlag = false
      }
      // 当校验条件不过时，返回
      if (!nextFlag) return
      // 封装数据对象
      const obj = {
        writeName: this.basicInfo.writeName,
        writeDesc: this.basicInfo.writeDesc,
        writeDate: this.basicInfo.writeType === '2' ? moment(this.basicInfo.writeDate).format('YYYY-MM-DD HH:mm:ss') : '',
        status: this.basicInfo.status,
        writeType: this.basicInfo.writeType,
        writeCron: this.basicInfo.writeType === '1' ? this.basicInfo.writeCron : '',
        needRetry: this.basicInfo.needRetry ? 1 : 0,
        retryTimes: this.basicInfo.retryTimes,
        retryInterval: this.basicInfo.retryInterval,
        topicId: this.basicInfo.topicId.toString(),
        writeFilterType: this.basicInfo.writeFilterType,
        writeUserFilter: JSON.stringify(this.writeUserFilter)
      }
      if (this.basicInfo.writeFilterType === '3') {
        obj.intervalCol = this.intervalCol
      } else {
        obj.intervalCol = null
      }
      // 调用接口添加数据
      this.loading = true
      if (this.action === 'Add') {
        // 添加操作
        postAction(this.url.add, obj).then((res) => {
          if (res.code === 200) {
            this.$message.success('添加指标固化成功!')
            // 进行数据库的封装，并调用接口进行数据的保存
            this.visible = false
            this.$emit('close', true)
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        // 编辑操作
        obj.id = this.updateId
        putAction(this.url.update, obj).then((res) => {
          if (res.code === 200) {
            this.$message.success('编辑指标固化成功!')
            // 进行数据库的封装，并调用接口进行数据的保存
            this.visible = false
            this.$emit('close', true)
          } else {
            this.$message.error(res.message)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

<style lang="less">
.content {
  width: 100%;
  height: 100%;
  padding: 0 20px 5px 20px;
  overflow-y: auto;
  .title {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 500;
    color: #222222;
    position: absolute;
    margin-top: 5px;
  }
  .top {
    width: 100%;
    height: 190px;
    border-bottom: 1px solid #d9d9d9;
  }
  .center {
    width: 100%;
    height: 160px;
    border-bottom: 1px solid #d9d9d9;
  }
  .top,
  .center,
  .bottom {
    position: relative;
    padding-top: 10px;
    .item {
      width: 100%;
      display: inline-block;
      margin-bottom: 12px;
      .item-left {
        width: 270px;
        float: left;
        text-align: right;
        line-height: 32px;
        font-size: 14px;
        padding-right: 20px;
        .requrid {
          color: red;
        }
      }
      .item-value {
        float: left;
        width: 620px;
        .item-check {
          line-height: 32px;
          float: left;
          margin-right: 45px;
        }
        .radio-line {
          line-height: 33px;
        }
        .item-input {
          float: left;
          margin-left: 20px;
        }
      }
      .item-error {
        float: left;
        line-height: 30px;
        margin-left: 15px;
        font-size: 15px;
        color: red;
      }
    }
    .code-item {
      width: 100%;
      height: 33px;
      .span-title {
        margin-left: 250px;
        width: 50px;
        line-height: 30px;
        display: inline-block;
        text-align: right;
      }
      .code-item-input {
        display: inline-block;
        margin-left: 0;
        width: 560px;
      }
    }
  }

  .bottom {
    width: 100%;
    height: calc(100% - 350px);
    .box {
      width: 100%;
      height: calc(100% - 45px);
      margin-top: -10px;
      overflow: hidden;
      .left {
        width: 270px;
        float: left;
        text-align: right;
        line-height: 46px;
        font-size: 14px;
        padding-right: 20px;
        .requrid {
          color: red;
        }
      }
      .right {
        width: calc(100% - 270px);
        height: 100%;
        position: relative;
        float: left;
        .box-content {
          top: -36px;
          float: right;
          .item-content {
            width: 100%;
            height: calc(100% - 32px);
            overflow-y: auto;
            padding-top: 10px;
            .item-select {
              width: 610px;
              height: 35px;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}
.modal-add {
  .ant-modal-body {
    padding: 0;
  }
}
</style>
